<template>
  <div>
    <div class="foot_layout">
      关联事件：
      <a-select
        ref="select"
        v-model:value="value1"
        style="width: 180px"
        :options="options.arr.data"
        :field-names="{ label: 'Describe', value: 'Id' }"
        @focus="focus"
        @change="handleChange"
      ></a-select>
    </div>

    <div class="main_layout">
      <div class="main_timer">
        <div class="timeNumber">{{ time }}</div>
      </div>
    </div>

    <div class="footer">
      <template v-if="state == 'PAUSE'">
        <a-button @click="start()">開始</a-button>
      </template>
      <template v-if="state == 'START'">
        <a-button @click="stop()">暫停</a-button>
        <a-button @click="commit()" style="margin-left: 12px">結束</a-button>
      </template>
    </div>
  </div>
</template>


<script>
import { message } from "ant-design-vue";
import { defineComponent, ref, reactive, onMounted } from "vue";
import { postJSON } from "../utils/request";
import { TimeTosec } from "../utils/tools";
export default defineComponent({
  name:'timer',
  setup() {
    let myDate = new Date();
    myDate.toLocaleDateString(); //获取当前日期
    myDate.setHours(0);
    myDate.setMinutes(0);
    myDate.setSeconds(0);
    myDate.setMilliseconds(0);

    const Data = myDate.getTime();

    // 关联事项选择变量
    const selectedId = ref("");
    var options = reactive({
      arr: [],
    });
    const value1 =ref('')

    // 時間計時器變量
    const seconds = ref(0);
    const minutes = ref(0);
    const hours = ref(0);
    const time = ref("00:00:00");
    const state = ref("PAUSE");

    let timer = "";

    onMounted((res) => {
      let params = {
        myDate: Data,
      };

      // 获取关联事项下拉数据
      postJSON("/HasOrder", params).then((res) => {
        options.arr = res;
      });
    });

    const Rule = (obj) => {
      if (obj < 10) return "0" + obj;
      else return obj;
    };

    // 時間計算函數
    const tick = () => {
      time.value =
        Rule(hours.value) +
        ":" +
        Rule(minutes.value) +
        ":" +
        Rule(seconds.value);
      console.log("time :>> ", time.value);
      if (seconds.value != 60) {
        seconds.value++;
        return;
      }
      if (minutes.value != 60) {
        minutes.value++;
        seconds.value = 0;
        return;
      }
      if (hours.value != 60) {
        hours.value++;
        seconds.value = 0;
        minutes.value = 0;
        return;
      }
    };

    // 開始
    const start = () => {
      // 判断是否关联事件
      if (selectedId.value == "") {
        message.info("请选择关联事件");
        return;
      }
      state.value = "START";
      tick();
      timer = setInterval(tick, 1000);
    };

    // 停止
    const stop = () => {
      state.value = "PAUSE";
      clearInterval(timer);
    };

    // 提交
    const commit = () => {
      state.value = "PAUSE";
      clearInterval(timer);

      let params = {
        Id: selectedId.value,
        Duration: TimeTosec(time.value),
      };

      postJSON("/commitOrder", params).then((res) => {
        let params = {
          myDate: Data,
        };
        
        // 获取关联事项下拉数据
        postJSON("/HasOrder", params).then((res) => {
          options.arr = res;
        });

        time.value =  "00:00:00";
        selectedId.value = '';
        value1.value = '';
      });

      console.log("params :>> ", params);
    };

    const focus = () => {
      console.log("focus");
    };

    const handleChange = (value) => {
      console.log(`selected ${value}`);
      selectedId.value = value;
    };
    return {
      options,
      focus,
      handleChange,
      start,
      state,
      time,
      stop,
      commit,
      value1
    };
  },
});
</script>

<style lang="less" scoped>
.main_layout {
  /* 设置阴影 */
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  /* 设置card的背景色 */
  background: #ffffff;
  position: relative;
  height: 500px;
  width: 500px;
  left: calc(50% - 250px);
  border-radius: 50%;
  margin-top: 20px;
  .timeNumber {
    line-height: 500px;
    font-size: 20px;
    font-weight: bolder;
  }
}

.footer {
  margin-top: 40px;
}

.foot_layout {
  margin-top: 40px;
}
</style>